<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragments::head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>栈主介绍</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/my.css">
</head>
<body>
<!--导航-->
<nav style="z-index: 1!important;"
     class="ui inverted attached segment my-padded-tb-mini m-opacity-mini my-shadow-small gird-header">
    <div class="ui container">
        <div class="ui secondary inverted stackable menu">
            <h2 class="ui yellow header item">BLog</h2>
            <a href="#" th:href="@{/}" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
            <a href="#" th:href="@{/types/-1}" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
            <a href="#" th:href="@{/tags/-1}" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
            <a href="#" th:href="@{/archives}" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
            <a href="#" th:href="@{/about}" class="active m-item item m-mobile-hide"><i class="info icon"></i>关于我</a>
            <div class="right m-item item m-mobile-hide">
                <div class="ui icon inverted transparent input">
                    <input type="text" placeholder="Search...."/>
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    <!--        三条杠-->
    <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>

<div class="my-bg-type-out" style="width: 100%;height: 40%">
    <img src="/static/images/aboutme.png" th:src="@{/images/aboutme.png}" alt="" class="my-bg"
         style="width: 100%;height: 100%">
    <div class="my-bg-black">
        <div class="ui container" style="position: relative;bottom: -540px">
            <div class="my-font-title-big-size" align="center" style="font-size:400%;">关于栈主</div>
            <div class="my-font-title-big-size" align="center" style="font-size:26px; margin-top: 0.3em">
                一个专注于互联网技术入门小白
            </div>
        </div>
    </div>
</div>
<!--中间内容-->
<div id="waypoint" class="ui container" style="margin-bottom: 100px!important;">
    <div class="ui container segment " align="center">
        <div class="ui container" align="center">
            <img src="https://picsum.photos/100/100?image=1027" alt=""
                 class="ui circular image">
        </div>
        <div class="content my-font-title" align="center" style="margin-top: 0.5em">迪迪崽崽</div>
        <div class="" style="margin-top: 0.8em !important;" align="center">
            <a href="" class="ui wechat circular icon button" data-content="微信不加好友" data-position="bottom center">
                <i class="weixin icon"></i>
            </a>
            <a href="" class="ui qq circular icon button" data-content="1751316471" data-position="bottom center">
                <i class="qq icon"></i>
            </a>
            <a href="https://www.csdn.net/" target="_blank" class="ui csdn circular icon button" data-content="点击跳转CSDN"
               data-position="bottom center">
                <i class="copyright outline icon"></i>
            </a>
            <a href="https://github.com/" target="_blank" class="ui github circular icon button"
               data-content="点击跳转Github" data-position="bottom center">
                <i class="github outline icon"></i>
            </a>
            <a href="https://gitee.com/" target="_blank" class="ui git circular icon button" data-content="点击跳转码云"
               data-position="bottom center">
                <i class="git outline icon"></i>
            </a>
        </div>
        <hr style="width: 30%;margin-top: 0.8em;">
        <div>
            <p class="m-text">“小二，上茶~”</p>
            <p class="m-text">“来~嘞~，客官您稍等”</p>
            <br>
            <p class="m-text">栈主一名00后大学生</p>
            <p class="m-text">河南人士，于郑州上学生活将近四年</p>
            <p class="m-text">技术宅，喜欢窝在电脑前学技术、看电影、追星</p>
            <br>
            <p class="m-text">生命在于折腾</p>
            <p class="m-text">既然来到了人间</p>
            <p class="m-text">便去经历，去拼搏，去感受，去爱</p>
            <p class="m-text">世界很大</p>
            <p class="m-text">有些鸟儿注定是不会被关在笼子里的</p>
            <p class="m-text">因为它们的每一片羽毛都闪耀着自由的光辉</p>
            <p class="m-text">生命不息，折腾不止</p>
            <p class="m-text">总有些人，有些事，会让你感觉到生命的温暖和满足，让你感慨生命的“不虚此行”</p>
            <p class="m-text">届时，我会说</p>
            <p class="m-text">我来过，我不后悔！</p>
        </div>
        <hr style="margin-top: 3em;">
        <div class="m-margin-top" style="margin-bottom: 50px!important;">
            <p>整体架构制作参考B站</p>
            <p>前端搭建在B站的基础上加入了自己最喜欢的国漫元素</p>
            <p>前端资源大都来自与开源框架 Semantic UI</p>
            <p>后端采用springboot+mybatis框架实现</p>
            <p>小白一名，做的不好，含请各位海涵</p>
        </div>
    </div>


</div>
<div id="toolbar" class="my-padded m-fixed m-right-bottom" style="display: none!important;">
    <div id="toTop-button" class="back-to-top my-fly-index"></div>
</div>
<!--尾部-->
<footer th:replace="_fragments::footer" class="ui inverted vertical segment my-padded-tb-massive my-opacity">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">

            <div class="four wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">Email：1751316471@qq.com</a>
                    <a href="#" class="item">QQ：1751316471</a>
                </div>
            </div>

            <div class="four wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">QQ</h4>
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/images/wechat.jpg" alt="" class="ui rounded image my-radius"
                             style="width: 120px"/>
                    </div>
                </div>
            </div>

            <div class="four wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">微信</h4>
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../static/images/wechat.jpg" alt="" class="ui rounded image my-radius"
                             style="width: 120px"/>
                    </div>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">客栈信息</h4>
                <div class="ui inverted link list" style="align-content: center;margin-top: 20px">
                    <div class="m-text-thin" style="text-align: left;margin-left: 75px;">
                        文章总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;">
                        11</h2> 篇
                    </div>
                    <div class="m-text-thin" style="text-align: left;margin-left: 75px;margin-top: 8px">
                        访问总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;">
                        5009</h2> 次
                    </div>
                    <div class="m-text-thin" style="text-align: left;margin-left: 75px;margin-top: 8px">
                        评论总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;">
                        6</h2> 条
                    </div>
                    <div class="m-text-thin" style="text-align: left;margin-left: 75px;margin-top: 8px">
                        留言总数： <h2 class="ui orange header m-inline-block m-margin-top-null" style="font-size:medium;">
                        6</h2> 条
                    </div>
                </div>

            </div>

        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini my-font-style">Power by DDZZ</p>
    </div>

</footer>
<th:block th:replace="_fragments::script">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
</th:block>
<script>
    $('.qq').popup();
    $('.wechat').popup();
    $('.csdn').popup();
    $('.github').popup();
    $('.git').popup();
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide')
    });

    $('#toTop-button').click(function () {
        $(window).scrollTo(0, 500);
    });
    var waypoint = new Waypoint({
        element: document.getElementById('waypoint'),
        handler: function (direction) {
            if (direction == 'down') {
                $('#toolbar').show(500);
            } else {
                $('#toolbar').hide(500)
            }
            //console.log('Scrolled to waypoint!')
        }
    })
</script>

</body>
</html>